<template>
  <div v-loading="loading" class="tpl-wrap">
    <div class="k-header">
      <el-page-header content="订阅消息" @back="goBack" />
      <div class="info-list">
        <el-row>
          <el-col :span="6">
            <div class="info-item">
              <div class="text label">小程序名称</div>
              <div class="text value">小程序</div>
            </div>
            <div class="info-item">
              <div class="text label">服务类目</div>
              <div class="text value">
                <span v-for="category in categoryList" :key="category.id" class="category-txt">{{ category.name }}
                </span></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <div class="text label">APP ID</div>
              <div class="text value">{{ appId }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-tabs v-model="activeName" v-loading="loading" @tab-click="handleClick">
      <el-tab-pane label="已配置模板" name="draft">
        <div class="list-search">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            @keyup.enter.native="searchByKeyword"
          >
            <div slot="prepend">模板名称</div>
          </el-input>
          <el-button
            type="primary"
            size="medium"
            :loading="loading"
            round
            icon="el-icon-search"
            @click="searchByKeyword"
          >查 询</el-button>
        </div>

        <el-table
          :data="draftList"
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="标题"
          />

          <el-table-column
            prop="content"
            label="内容"
          >
            <template slot-scope="scope">
              <div style="white-space:pre-wrap;line-height: 2">{{ scope.row.content }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="priTmplId"
            label="模板ID"
          />

          <el-table-column
            prop="type"
            align="center"
            label="类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type === 2">一次性订阅</span>
              <span v-if="scope.row.type === 3">永久订阅</span>
            </template>

          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
          >
            <template>
              <!--              <el-button @click="handelAddTemplate(scope.row.draftId)" type="text" size="small">详情</el-button>-->
              <!--              <el-button @click="handelAddTemplate(scope.row.draftId)" type="text" size="small">删除</el-button>-->
            </template>

          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane v-loading="tplLoading" label="公共模板" name="template">
        <div class="list-search">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            @keyup.enter.native="searchByKeyword"
          >
            <div slot="prepend">模板ID</div>
          </el-input>
          <el-button
            type="primary"
            size="medium"
            :loading="loading"
            round
            icon="el-icon-search"
            @click="searchByKeyword"
          >查 询</el-button>
        </div>
        <el-table
          :data="templateList"
          style="width: 100%"
        >
          <el-table-column
            prop="tid"
            label="模板ID"
          />

          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop="type"
            label="类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type === 2">一次性订阅</span>
              <span v-if="scope.row.type === 3">永久订阅</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="categoryId"
            label="服务类目"
          >
            <template slot-scope="scope">
              {{ categoryMap[scope.row.categoryId] }}
            </template>
          </el-table-column>

          <el-table-column
            prop="option"
            label="操作"
          >
            <template>
              <!--              <el-button @click="handelDeleteTemplate(scope.row.templateId)" type="text" size="small">选用</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          :current-page.sync="pageNum"
          :page-sizes="[10,20,30]"
          :page-size.sync="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/* eslint-disable no-console */
import dayjs from 'dayjs'
import { getPrivateTemplateList, getPublicTplList, getWxaCategory } from '@/api/wxTemplateMsg'

export default {
  name: 'CodeTemplate',
  props: {
    appId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'draft',
      loading: false,
      tplLoading: false,
      draftList: [],
      tableData: [],
      categoryList: [],
      categoryMap: [],
      categoryListTest: [{ 'id': 670, 'name': '线下超市/便利店' }, { 'id': 673, 'name': '线下超市/便利店' }, { 'id': 672, 'name': '线下超市/便利店' }],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      templateList: [],
      curList: []
    }
  },
  computed: {},
  mounted() {
    this.getPrivateTplList()
    this.getCategory()
  },
  methods: {
    handleCurrentChange(cur) {
      this.getTemplateList()
    },

    handleSizeChange(cur) {
      this.getTemplateList()
    },

    getPrivateTplList() {
      getPrivateTemplateList({ appId: this.appId }).then((resp) => {
        this.draftList = resp.data
      })
    },
    getTemplateList() {
      const ids = []
      for (var i in this.categoryList) {
        ids.push(this.categoryList[i].id)
      }
      this.tplLoading = true
      getPublicTplList({
        appId: this.appId,
        ids: ids.join(','),
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then((resp) => {
        this.tplLoading = false
        this.templateList = resp.data.data
        this.total = resp.data.count
      }).catch(() => {
        this.tplLoading = false
      })
    },

    convertTime(row, column, cellValue, index) {
      console.info(row.createTime)
      return dayjs.unix(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    goBack() {
      this.$router.back()
    },
    handleClick(tab) {
      if (tab.name === 'template') {
        this.getTemplateList()
      } else {
        this.getTemplateDraftList()
      }
    },
    getCategory() {
      getWxaCategory({ appId: this.appId }).then(res => {
        console.info(res)
        this.categoryList = res.data
        const mp = {}
        for (const i in this.categoryList) {
          mp[this.categoryList[i].id] = this.categoryList[i].name
        }
        this.categoryMap = mp
        this.categoryList = res.data
      })
    },
    handelAddTemplate(draftId) {
      console.log(draftId)
      this.$confirm('确定把草稿箱代码添加到代码库？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.loading = true
      }).catch(() => {
        this.loading = false
      })
    },

    handelDeleteTemplate(templateId) {
      this.$confirm('该操作会导致相关版本失效，确定继续？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .k-header {
    background-color: #ffffff;
    padding: 20px 20px;
  }

  .tpl-wrap ::v-deep .el-tabs__header {
    margin-bottom: 10px !important;
  }

  .tpl-wrap ::v-deep .el-tabs__active-bar {
    height: 3px !important;
  }

  .tpl-wrap ::v-deep .el-tabs__nav-wrap {
    background: #ffffff !important;
    padding: 0 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

  }

  .tpl-wrap ::v-deep .el-tabs__content {
    background: #ffffff !important;
    padding: 20px 20px;
    border-radius: 5px;
  }

  .info-item {
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 10px;
    }

    .text {
      line-height: 1.6;

    }

    .label {
      color: #333;
      font-size: 14px;
      line-height: 1.6;
      display: inline-block;
      width: 80px;
    }

    .value {
      color: #999;
      font-size: 16px;
      line-height: 30px;
    }
  }
  .info-list {
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
  .category-txt {
    margin-right: 5px;
    &:after {
      content: ",";
    }
    &:last-child:after {
      content: "";
    }

  }
  .list-search {
    margin-bottom: 20px;
    .el-select {
      width: 120px;
    }
    .el-input {
      width: 400px;
      margin-right: 10px;
    }
  }
</style>
